import Taro , { Component } from '@tarojs/taro';
import { View, Text , Button} from '@tarojs/components';
import './index.scss';
import NavigationBar from '../../../components/navigationBar/index';
import { checkExpress } from '../../../services/order';
import Complete from '../../../static/public/icon_complete.png';
import { fullImgUrl } from '../../../utils/utils';
import { EXPRESS_ORDER_STATUS } from '../../../utils/config';

export default class Index extends Component {

   config = {
       navigationBarTitleText: ''
  }

  state={
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    routes: null,
    order: null,
  }

  componentWillMount () {
    checkExpress({
      order_id: this.$router.params.id
    }).then(res => {
      console.log(res)
      this.setState({
        routes: res.routes.reverse(),
        order: res.order
      })
    })
  }
  componentDidMount () {}
  componentWillReceiveProps (nextProps,nextContext) {}
  componentWillUnmount () {}
  componentDidShow () {}
  componentDidHide () {}
  componentDidCatchError () {}
  componentDidNotFound () {}
  render() {
    const { navigationBarHeight, order, routes } = this.state
    return (
      <View className="express-route" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="查看物流" />
        {order && <View className="top">
          <Image className="goods-image" src={fullImgUrl(order.has_order_goods_sku[0].cover)} />
          <View className="express-info">
            <View className="item">
              <View className="key">物流状态：</View>
              <View className="value">{EXPRESS_ORDER_STATUS[routes[routes.length - 1].opcode]}</View>
            </View>
            <View className="item">
              <View className="key">物流快递：</View>
              <View className="value">{order.express_name}</View>
            </View>
            <View className="item">
              <View className="key">运单编号：</View>
              <View className="value">{order.express_no}</View>
            </View>
          </View>
        </View>}
        {routes && <View className="bottom">
          <View className="line"></View>
          { routes.map(item => {
            return <View className="item" key={item.id}>
              <View className="left">
                <View className="time">{item.accept_time}</View>
                {/* <View className="date">{item.split(' ')[0]}</View>
                <View className="time">{item.split(' ')[1]}</View> */}
              </View>
              <View className="middle">
                {item.opcode === '80' ?
                  <Image className="complete" src={Complete} /> :
                  <View className="radius"></View>
                }
              </View>
              <View className="right">
                <View className="status success">{EXPRESS_ORDER_STATUS[item.opcode]}</View>
                <View className="remark">{item.remark}</View>
              </View>
            </View>
          })}
        </View>}
      </View>
    );
  }
}
